Ajouter Une Signature à Vos Messages Blogger

Vous pouvez ajouter une signature personnalisée et automatique en dessous de chaque article de votre blog Blogger.
Ça serait très utile si vous êtes une équipe de blogueurs : vous pouvez utiliser des signatures uniques pour chaque auteur. 
Signer tous vos messages avec le nom de votre blog ou avec votre propre nom est une bonne façon de personnaliser votre blog et de le rendre plus attrayant.

Ajouter Une Signature à Vos Messages Blogger

1. Créez votre propre signature en utilisant un outil de création d'images tel que Photoshop, Gimp .. ou avec l'un des générateurs en ligne tel que My Live Signature.

2. Télécharger votre signature dans Blogger puis récupérez son URL.

3. Maintenant allez à "Modèle" > "Modifier le code HTML" > "Traiter" > "Gadgets Développés"
et trouver (CTRL+F) la ligne suivante :

<div class='post-footer-line post-footer-line-1'>

Si vous ne trouvez pas ce code, essayez de chercher le suivant :

<p class='post-footer-line post-footer-line-1'>

Ou celui-ci :

<data:post.body/>

3.A- Si vous êtes le seul auteur du blog, ajoutez le code suivant juste après le bout de code précédant :

<b:if cond='data:blog.pageType == "item"'>
<img src='URL_De_La_Signature' style='border:0px;'/>
</b:if>

Changez URL_De_La_Signature avec l'URL de votre image de signature.

3.B- Si vous êtes dans une équipe Blog, collez le code suivant juste après le code que vous avez trouvé :

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.author == &quot;Nom_Auteur1&quot;'>
<img src='url_image_signature_Auteur1' style='border:0px;'/>
</b:if>
<b:if cond='data:post.author == &quot;Nom_Auteur2&quot;'>
<img src='Url_image_signature_Auteur2' style='border:0px;'/>
</b:if>
</b:if>

Le code doit être modifié avec les noms des auteurs et les URLs d'images des signatures.

Si vous êtes plus de deux auteurs, vous devez répéter le bloc autant de fois que le nombre d'auteurs :
Ici j'ai mentionné 2 blocs : 1er bloc en bleu pour le l'auteur 1 et deuxième bloc en noir pour l'auteur 2.

Si vous souhaitez que la signature apparaîtra dans la page d’accueil du blog, vous devez supprimer les lignes en rouge.

4. Enregistrer votre modèle et vous devriez voir la signature en action.

Voici deux exemples de signatures crées avec MyLiveSignature :

Ajouter Des Liens Non Statiques au Gadget PageList Blogger

Nous allons voir dans ce tutoriel comment ajouter des liens "non statiques" au gadget PageList de Blogger.
En fait, il existe deux méthodes pour ajouter des URLs (liens externes, urls de libellés, adresse d'un article etc...) au menu de pages Blogger :
- La première méthode (la plus simple) consiste à utiliser la nouvelle interface Blogger.
- La deuxième (un peu plus compliqué) consiste à modifier le code Html de votre modèle.

Méthode 1 : à l'aide de la nouvelle interface Blogger

1. Cliquez sur le lien 'Effectuer la mise à jour dès maintenant' en haut du tableau de bord Blogger. (Vous pouvez toujours revenir à l'ancienne interface à tout moment)

2. Cliquez sur le menu 'gris' à côté du blogue dans lequel vous souhaitez ajouter des liens, puis sélectionnez 'Pages'

3. Cliquez maintenant sur 'Nouvelle Page' puis 'Adresse web'

4. Entrez le titre et l'URL du lien puis cliquez sur 'Enregistrer'

Méthode 2 : En Modifiant le code HTML

1. Si vous n'avez pas encore installé le gadget "PageList", alors rendez-vous dans l'onglet "Mise En Page" de votre blog, et cliquez sur "Ajouter un gadget".
Dans la liste des gadgets proposée par Blogger, sélectionnez "Pages". Vous pouvez ensuite configurer ce gadget en choisissant un titre et les pages à afficher.

2. Allez maintenant à "Modèle" > "Modifier le code HTML" > "Développer des modèles de gadgets"

3. Rechercher le code du gadget "Pages", comme ceci :

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>
      <select expr:id='data:widget.instanceId + &quot;_select&quot;'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option>
          </b:if>
        </b:loop>
      </select>
      <span class='pagelist-arrow'>&amp;#9660;</span>

    <b:else/>
      <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
          <b:else/>
            <li><a expr:href='data:link.href'><data:link.title/></a></li>
          </b:if>
        </b:loop>
    Insérer vos liens ICI
      </ul>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

4. Insérer les liens entre les balise </b:loop> et </ul> de la façon suivante

<li> <a href="URL_du_lien">Titre Du Lien</a></li>

Voila c'est tout pour ce tutoriel, espérant qu'il répond à vos attentes.

Liste Déroulante Pour Les Libellés Blogger

Le widget libellés de Blogger est présenté sous forme d'une liste verticale de liens ou encore d'un nuage.
Certains blogueurs se retrouvent avec trop de libellés, ce qui devient un peu illisible et le widget prendra trop d'espace.
Nous allons voir dans ce tutoriel comment adapter le gadget libellés sous forme de menu ou d'une liste déroulante contenant tous les libellés, étiquettes, catégories de votre blog.

Démonstration

Menu Déroulant Pour Les Libellés Dans Blogger

1. Si vous n'avez pas encore installé le gadget "Libellés", alors rendez-vous dans l'onglet "Mise En Page" de votre blog, et cliquez sur "Ajouter un gadget".
Dans la liste des gadgets proposée par Blogger, sélectionnez "Libellés". Vous pouvez ensuite configurer ce gadget en choisissant d'afficher tous les libellés de votre blog, ou seulement une sélection correspondant à vos catégories les plus importants. Ces libellés pourront également être classés par fréquence ou par ordre alphabétique. Il ne vous restera ensuite qu'à choisir l'emplacement de votre widget libellés.

2. Allez maintenant à "Modèle" > "Modifier le code HTML" > Gadgets NON Développés et recherchez (avec ctrl+F) la ligne suivante :

<b:widget id='Label1' locked='false' title='Libellés' type='Label'/>

3. Remplacez la ligne précédente avec le code suivant

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br/>

<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

- Note : le texte en Bleu c'est le texte qui sera affiché sur la liste déroulante. Vous pouvez le modifier avec Libellés, Catégories, etc...
4. Enregistrer votre modèle.

Voilà, le gadget libellés s'affiche maintenant sous forme d'un menu déroulant.

Placer Les Liens De Navigation Blogger En Haut De Page

Voici un tutoriel très simple vous explique comment mettre les liens de navigation qui se trouvent par défaut au bas du blog :
"Messages Plus Anciens", "Accueil", "Messages Plus Récents"
en haut des articles dans Blogger.

Placer ces mentions en haut de la page permet aux visiteurs qui ne lisent pas un message, de passer immédiatement à une autre page au lieu de quitter le blog.

Comment placer les liens de navigation en haut de page

Important : Télécharger votre modèle avant de commencer.

1. Connectez vous à Blogger et allez à "Présentation" > "Modifier le code HTML"
2. Cochez la case "Développer des modèles de gadgets"
3. Recherchez le code suivant :

<!-- posts -->

    <div class='blog-posts hfeed'>

4. Ajouter le code ci-dessous, juste après, et enregistrer votre modèle.

<b:include name='nextprev'/>

Résumé Automatique De Vos Articles Avec Image

Dans ce tutoriel, je vais vous expliquer comment afficher un résumé automatique de vos articles avec image et lien "Lire la suite" dans la page d'accueil, des archives, des libellés et de recherche.

Installation Du Hack : Résumé avec Image et "Lire la suite"

Important : Télécharger votre modèle avant de commencer.

1. Connectez-vous à blogger
2. Allez à "Présentation" > "Modifier le code HTML"
3. Cocher la case "Développer des modèles de gadgets"
4. Recherche la balise </head> et juste avant copier/coller le code suivant :

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
        var s = strx.split("<");
        for(var i=0;i<s.length;i++){
            if(s[i].indexOf(">")!=-1){
                s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
            }
        }
        strx =  s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
}

function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
    if(img.length>=1) {  
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
    }
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}
//]]>
</script>

# Vous pouvez changer les valeurs numériques en fonction de votre utilisation.

summary_noimg = 430;          :La longueur du résumé d'article sans image
summary_img = 340;              :Longueur du résumé d'article avec image
img_thumb_height = 100;       :Hauteur en pixel de l'image de résumé
img_thumb_width = 120;        :Largeur en pixel de l'image de résumé

5. Maintenant recherchez la balise <data:post.body/> et juste avant copier/coller le code suivant :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>

</div>

<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Lire la suite ... </a></span>
</b:if>
</b:if>

6. Enregistrer votre modèle.

Remplacer "Messages Plus Récents", "Messages Plus Anciens" & "Accueil" Avec Des Images

Dans ce tutoriel, je vais vous montrer comment remplacer les liens de navigation situées au-dessous des articles : "Messages Plus Récents", "Accueil" et "Messages Plus Anciens" avec des images.
Si vous utilisez la barre de navigation numérotée pour les pages, ces liens ne vont apparaître que sur les pages d'articles.

Important : Télécharger votre modèle avant de commencer.

1. Connectez-vous à Blogger et allez à "Présentation" > "Modifier le code HTML"

2. Cochez la case

Remplacer "Messages Plus Anciens"

Rechercher <data:olderPageTitle/> et le remplacer par le code ci-dessous :

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsQSFlJ3_Z9wd65jiSaA2uB2qRYZejUh-Gz410ur4CHxojljyHjXcziYJDCexR8DWSHS4ffkIk9AKLARbXQV4gbW_mdNeDpqOlOudxb4l0tX95MLloSOW7b-788Sa207jEetoVJNWwuPBH/s1600/w2b_next.png' style='border: 0 none;vertical-align: middle;'/>

Remplacer "Messages Plus Récents"

Rechercher <data:newerPageTitle/> et le remplacer avec le code suivant :

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4eTHhSgPhE27f0sZPQQcw56W8b7DhhGwRmjRGuiXolpVGwnbW3InvxTWYcZsJMgrLat8vnHPt36fmFbaU7HobFt-Mri5nM42s2WdxywDUJXpAdQCPRRZBJX2oXB_Zd8KdclzwNJixNzQt/s1600/w2b_prev.png' style='border: 0 none;vertical-align: middle;'/>

Remplacer le lien "Accueil"

Rechercher <data:homeMsg/> et le remplacer avec le code ci-dessous :

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNMYNpooDa3n64-k8602xb34ewJ1Cm9uicFWy1vre6g38-W1g20yv6LYhk3I2ftG9YxeIQf0c8SDUYhENOGrwnfBvopdRFqoyrLNoH7_PcQK62Qe-lJUvpcEDXNHd2NBgaV6RppysSBfAO/s1600/w2b_home.png' style='border: 0 none;vertical-align: middle;'/>

Vous pouvez mettre vos propres icônes en remplaçant les URL des images dans les codes ci-dessus.

Télécharger d'autres modèles de boutons

Cet ensemble d'icône a été créer par MyBloggerTricks. Vous pouvez télécharger ce pack gratuitement sur MyBloggerTricks.com
Cliquez sur l'image pour commencer le téléchargement

Ajouter Un Fil D'ariane à Votre Blog Blogger

Le breadcrumb (traduction: miette de pain) est le terme anglais pour désigner le fil d'Ariane. Cela fait référence à un élément de navigation sur les sites web. Cet élément indique à l'utilisateur où il se situe dans la hiérarchie du site, par rapport à la page d'accueil. A titre d'exemple, le breadcrumb pourrait indiquer à l'utilisateur dans quel catégorie il se situe, dans quelle sous-catégorie et sur quelle page de cette sous-catégorie.
Voici un exemple :
Accueil >> Tutoriel Blogger >> Ajouter un fil d'ariane à Blogger

Nous allons voir dans ce tutoriel comment ajouter un breadcrumb/Fil d'Ariane à Blogger Blog.

Ajouter Un Fil D'Ariane à Blogger

Vous savez maintenant ce qu'est un fil d'Ariane, suivez les étapes suivantes pour l'ajouter à votre blog blogger :

1. Allez à "Présentation" > " Modifier le code HTML" > Cochez la case " Développer des modèles de gadgets"

2. Recherchez (avec CTRL+F) la ligne suivante dans votre modèle

<b:include data='top' name='status-message'/>

Et juste avant collez le code suivant

<b:include data='posts' name='breadcrumb'/>

3. Maintenant recherchez la ligne suivante

<b:includable id='main' var='top'>

Si vous trouvez deux occurrences, placez-vous sur la deuxième et juste avant elle ajoutez le code suivant

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == "true"'>

 » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>

</b:if>

</b:loop>
 » <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Ce code affichera uniquement le dernier libellé d'article dans le fil d'Ariane. Si vous souhaitez afficher tous les libellés, alors vous devrez supprimer les 2 lignes en bleu.

4. Enregistrer votre modèle.
)
5. Si vous souhaitez réduire la taille du fil d'Ariane, ajoutez le code CSS suivant à votre modèle ( juste avant la balise ]]></b:skin> )

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

Formulaire De Contact Gratuit Pour Votre Site Ou Blog

Créez votre formulaire de contact HTML facilement et gratuitement à l'aide de  foxyform.com et insérez le dans votre site ou blog.
C'est simple et rapide, et pas besoin d'avoir de serveur php, un simple accès à votre code source HTML suffit.

I'inscription n'est pas requise. Ainsi, vous pouvez l'ajouter en quelques secondes. Une protection anti spam est intégré et vos visiteurs peuvent soumettre le formulaire de contact sans rafraîchir la page.

Ajouter Un Formulaire De Contact à Votre Site/Blog

Pour créer le formulaire de contact gratuit de "FoxyForm", procédez comme suit :

1. Allez à l'adresse suivante : http://fr.foxyform.com/
2. Sélectionnez les champs que vous voulez inclure dans le formulaire et décider s'ils sont obligatoires ou non.

3. Personnalisez la couleur, le font, la police... pour votre formulaire de contact pour mieux correspondre au design de votre site/blog.

4. Entrez une adresse e-mail valide pour recevoir les données envoyées du formulaire.

5. Maintenant, appuyez sur le bouton
Le code HTML pour votre formulaire de contact s'affiche. Copiez et collez ce code sur votre site.

6. Maintenant connectez vous à Blogger, créez un message ou une page, cliquez sur l'onglet "Modifier le code HTML"  et copier/coller Le code HTML de "FoxyForm" dans le corps du Message comme sur l'image suivante :

Pour voir une démonstration du formulaire de contact "FoxyForm", consultez notre page de contact.

L'importance de ce formulaire de contact est qu'il peut soumettre sans rafraîchir la page et affiche un message de remerciement après l'envoi des données.